<template>
	<view class="container">
		<!-- 列表 -->
		<view class="box">
			<view class="link-title">
				付款账号
			</view>
			<view class="link-type">
				<rich-text class="htmltext" v-html="info.bank_con"></rich-text>
			</view>
			
			<view class="link-title">
				付款二维码
			</view>
			<view class="link-image">
				<image :src="info.rechargeimg" mode="widthFix"></image>
			</view>

			<view class="QRcode">
				<view class="QRcode-cope" @click="navTo('/pages/user/rechargeAdd')">提交付款信息</view>
			</view>
			
			<view class="details">
				<rich-text class="htmltext" v-html="info.recharge_con"></rich-text>
			</view>

		</view>

	</view>
</template>
<script>
	import { mapMutations, mapState } from 'vuex';
	
	export default {
		
		data() {
			return {
				info: {},
				dataForm:{
					address:''
				},
				deposit: '',
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.token = this.$api.get('token');
			if (!this.token) {
				uni.navigateTo({
					url: '/pages/public/login'
				});
				return;
			}
			
			//获取用户信息
			this.getmedate();
			//获取充值信息
			this.rechargeinfo();
		},
		computed: {
			//对全局变量进行监控
			...mapState(['hasLogin'])
		},
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/user/rechargeRecords');
			}
		},
		methods: {
			//对全局方法进行监控
			...mapMutations(['login']),
			
			routeTo(){
				uni.navigateTo({
					url:'/pages/wallet/rechargeRecords'
				})
			},
			
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.token) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				});
			},

			// #ifdef H5
			onCopyResult(type) {
				console.log(type)
				if (type === 'success') {
					uni.showToast({
						title: '复制成功',
						icon: "none",
						duration: 1000
					})
				} else {
					uni.showToast({
						title: '复制失败',
						icon: "none",
						duration: 1000
					})
				}
			},
			// #endif
			// 复制
			fuzhi: function() {
				console.log(this.deposit)
				uni.setClipboardData({
					data: this.deposit,
					success: function() {
						console.log('success');
					}
				});
			},
			async rechargeinfo() {
				const param_userinfo = {
					token: this.token
				};
				await this.$http.request('User', 'rechargeinfo', 'GET', param_userinfo, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							this.info = res.data.data;
						}
					}
				});
			},
			//获取用户信息
			async getmedate() {
				const param_userinfo = {
					token: this.token
				};
				await this.$http.request('User', 'userinfo', 'GET', param_userinfo, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							this.userInfo = res.data.data;
						}
					}
				});
			},
			
		}
	}
</script>

<style lang='scss' scoped>
	.details {
		/* color: rgba(251,251,251,.9); */
		margin-top: 30upx;

		.details-name {
			/* color: rgba(151,151,151,.5); */
		}

		.details-box {}

		.details-box1 {}
	}

	.QRcode {
		/* background: rgba(28, 28, 28, .4); */
		border-radius: 12upx;
		margin-top: 30upx;
		color: rgba(151, 151, 151, .9);

		.QRcode-name {
			text-align: center;
		}

		.QRcode-img {
			text-align: center;
			margin: 0 auto;

			.QRcode-img1 {
				width: 360rpx;
			}
		}

		.QRcode-map {
			margin-bottom: 20upx;
		}

		.QRcode-detail {
			text-align: center;
			/* color: rgba(251,251,251,.9); */
		}

		.QRcode-cope {
			margin-top: 20upx;
			text-align: center;
			background: #fa436a;
			color: rgba(251, 251, 251, .9);
			height: 66upx;
			line-height: 66upx;
			width: 100%;
			margin: 0 auto;
			border-radius: 12upx;
		}
	}

	.link-title{
		font-size: 32rpx;
		line-height: 60upx;
		color: #fa436a;
		border-bottom: 2upx solid #fa436a;
	}
	
	.link-type {
		/* color: rgba(251, 251, 251, .8); */
		font-size: 32rpx;
		padding: 20upx 0upx;
		
		.link-type-name {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: 8rpx;
		}

		.link-type-deilad {
			width: 260upx;
			font-size: 34upx;
			text-align: center;
			margin-top: 16upx;
			padding: 6upx 0;
			margin-left: 8upx;
			border-radius: 8upx;
			background: #fa436a;
			color: rgba(251, 251, 251, .8);
		}

		.link-type-num {
			margin-top: 42upx;

			.link-type-num-size {
				color: #fa436a;
				padding: 0 6rpx;
			}
		}
	}

	.link-image{
		text-align: center;
		margin-left: calc(50% - 250upx);
		image{
			display: block;
			width: 500upx;
		}
	}


	.hads {
		width: 100%;

		/* background: #09f !important; */
		.deposit {
			width: 100%;
			padding: 12rpx 0rpx;

			/* color: #FFFFFF; */
			/* background:rgba(251,251,251,1); */
			.deposit-navato {
				display: flex;
				align-items: center;
				width: 100%;
				margin-left: 12rpx;

				.deposit-navato-img {
					width: 30rpx;
				}

				.deposit-navato-img1 {
					width: 30rpx;
					margin-right: 22rpx;
				}

				.deposit-navato-name {
					// text-align: center;
					margin: 0 auto;
					font-weight: 600;
					font-size: 36rpx;
				}
			}
		}
	}

	.container {
		/* padding: 20upx 20upx; */

		.box {
			padding: 30rpx 26rpx;
		}
	}

	page {
		/* background: rgba(28, 28, 28, .8); */
		height: 100%;
		width: 100%;
	}
</style>
